{extend name="public/container"}
{block name="content"}
<style type="text/css">
    .radius-wrap .title-wrap {margin-bottom: 0;}
    .statistic .item:not(:last-child) {margin-right: 16px;}
    .statistic .item .content-wrap .icon {width: 50px;height: 50px;}
    .statistic .item .content-wrap .number .unit {font-size: 12px;}
    .statistic .item .title-wrap .unit {padding: 2px 4px; font-size: 10px;}
</style>
<div id="myApp" v-cloak>
    <div class="padding-10">
        <div class="douxue-filter flex flex-between" style="margin-bottom:20px;">
            <el-form :inline="true" :model="where" size="mini" class="flex">
                <div class="flex flex-between">
                    <el-form-item label="选择日期">
                        <el-date-picker
                            v-model="where.date"
                            type="date"
                            size="small"
                            value-format='yyyy-MM-dd'
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-input size="small" v-model="where.name" placeholder="关键字搜索">
                            <el-button slot="append" size="small" type="primary" @click="doLoadRows(1)" icon="el-icon-search"></el-button>
                        </el-input>
                    </el-form-item>
                </div>
            </el-form>

            <el-button type="primary" size="small" icon="el-icon-download" @click="exportData">导出</el-button>
        </div>

        <div class="statistic flex">
            <div class="col-sm-4 item radius-wrap" v-for="item in statistic">
                <div class="title-wrap flex flexcenter flexbetween padding-10">
                    <div class="title">{{item.label}}</div>
                    <div class="unit">{{item.unit}}</div>
                </div>

                <div class="content-wrap flex flex-center  padding-20">
                    <div :class="[item.icon , 'icon']"></div>
                    <div class="number">
                        <div class="nums">{{item.value}}</div>
                        <div class="unit">{{item.unit}}</div>
                    </div>
                </div>
            </div>
        </div>


        <div class="">
            <el-table
                :data="rows"
                style="width: 100%"
                size="mini">
                <el-table-column
                    prop="order_type_display"
                    label="订单类型"
                    width="100"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="relation_name"
                    label="购买项目"
                    width="120"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="create_time"
                    label="订单日期"
                    width="140"
                    align="left">
                </el-table-column>
                <el-table-column
                    prop="nickname"
                    label="用户昵称"
                    width="100"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="pay_type_display"
                    label="付款方式"
                    width="100"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="total_amount"
                    label="应收总额"
                    width="80"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="actual_amount"
                    label="实收总额"
                    width="80"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="spread_user"
                    label="推广人"
                    width="100"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="p_spread_user"
                    label="上级推广人"
                    align="left">
                </el-table-column>

                <el-table-column
                    prop="commission"
                    label="佣金支出"
                    width="100"
                    align="left">
                </el-table-column>

            </el-table>
            <div class="pagination">
                <el-pagination
                    hide-on-single-page
                    size="mini"
                    background
                    layout="prev, pager, next"
                    :total="rowsCount"
                    :page-size="limit"
                    @current-change="doLoadRows">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var my = new Vue({
        el: "#myApp",
        data: {
            pn: 1,
            limit: 10,
            rowsCount: 0,
            rows: [],
            where:{
                school_id:"",
                date:"",
            },
            statistic:[
                {
                    label:"分销订单数",
                    unit:'个',
                    value:0,
                    icon:'cal-icon icon'
                },
                {
                    label:"分销订单总额",
                    unit:'元',
                    value:0,
                    icon:'money-icon icon'
                },
                {
                    label:"分销佣金支出总额",
                    unit:'元',
                    value:0,
                    icon:'card-icon icon'
                }
            ],
            organs: [],
            schools:[],
            disable_organ: default_org_id > 0 ? true : false,
            disable_school: default_school_id > 0 ? true : false,
        },
        methods: {
            doLoadRows (pn) {
                this.pn = pn || 1
                this.where.last_time=this.where.last_time?this.where.last_time:''
                url=Url({a:'getOrderList' , q:{page:this.pn,school_id:this.where.school_id,date:this.where.date,mobile:this.where.mobile,name:this.where.name,course:this.where.course}});
                // alert(result)
                axios.get(url)
                    .then(res => {
                        console.log(res.data.data)
                        this.rows = res.data.data.data
                        this.rowsCount = res.data.data.total
                        this.statistic[0].value=this.rowsCount
                    })
                this.getSumAmount()
            },
            exportData(pn){
                this.pn = pn || 1
                this.where.last_time=this.where.last_time?this.where.last_time:''
                url=Url({a:'getOrderList' , q:{page:this.pn,school_id:this.where.school_id,date:this.where.date,mobile:this.where.mobile,name:this.where.name,course:this.where.course,export:true}});
                // alert(result)
                location.href=url
                // axios.get(url)
                //     .then(res => {
                //         console.log(res.data)
                //     })
            },
            getSumAmount(){
                this.where.last_time=this.where.last_time?this.where.last_time:''
                url=Url({a:'getSumAmount' , q:{school_id:this.where.school_id,date:this.where.date,mobile:this.where.mobile,name:this.where.name,course:this.where.course}});
                // alert(result)
                axios.get(url)
                    .then(res => {
                        this.statistic[1].value=res.data.data.actual_amount
                        this.statistic[2].value=res.data.data.commission
                    })
            },
            doModify (id) {
                location.href = '{:Url('edit')}?id=' + id
            },
            doDelete (id) {
                this.$confirm('确认删除该条记录?').then(_ => {
                    axios.get(Url({a:'delete' , q:{id:id}})).then(res => {
                        this.$message({
                            message: res.data.msg,
                            type: res.data.code === 200 ? 'success' : 'error',
                        })
                    }).catch(_ => {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    })

                    return this.doLoadRows();
                }).catch(_ => {})
            }
        },
        mounted(){
            this.doLoadRows()
        }
    })
</script>
{/block}